<div class="assess">
<div class="assess-container">
<header>
<div class="farms">
<ul class="farmList">
<li class="farm-name"><i></i>风场：</li>
<li *ngFor="let item of farms let i =index " [ngClass]="{active:item.farmId == currentFarm.farmId}" (click)="onFarmClick(item)">
{{item.farmName}}
</li>
</ul>
</div>
<div class="time-choose">
<div class="time-spans">
<span class="time">
             <span (click)=onClickHeader(0) [ngClass]="{on:active==0}">年度</span>
<span (click)=onClickHeader(1) [ngClass]="{on:active==1}">月度</span>
</span>

<span>
<span>选择时间：</span>
<span *ngIf="true">   
<select class="year" [ngModel]="currentYear" (ngModelChange)="onChangeYear($event)">
<option [value]="year" *ngFor="let year of years" > {{year}} </option>               
</select>
年
</span>
<span *ngIf="active==1">   
<select class="month" [ngModel]="currentMonth" (ngModelChange)=" onChangeMonth($event)">
<option [value]="month" *ngFor="let month of months" > {{month}}</option>               
</select>
月
</span>
</span>

<span>
<button class="button-trend" (click)="onSearch(active)">确定</button>
</span>
</div>
</div>
</header>
<div class="main">
<div [ngClass]="{'main-content':true, active:active==0}">
<div class="farm-assess">
<section>
<div class="pie-chart chart">
<div>
<p>{{ currentYear }}年{{ currentFarm?.farmName }}风场发电能力评估</p>
</div>
<div class="pie-tab">
<div class="pie">
<app-assess-pie-echart [active]="active" [series]="yearPieSeries"></app-assess-pie-echart>
</div>
<div class="tab">
<div class="center">
<table>
<tr style="color:#22b14c;">
<td>实发电量</td>
<td>{{ actualPowerTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#a349a4;">
<td>性能损失电量</td>
<td>{{ performLossTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#ff7f27;">
<td>停机损失电量</td>
<td>{{ stopLossTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#00a2e8;">
<td>限电损失电量</td>
<td>{{ limitLossTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#FF0000;">
<td>坏点损失电量</td>
<td>{{ badLossTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#fff;">
<td>能量利用率</td>
<td>{{ usePercentTotal | number:'1.1-2' }} %</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="assess-count">
<p>{{currentYear}}年{{currentFarm?.farmName}}风场发电能力：<span>{{ powerJudge }}</span></p>
<p>影响风场发电能力最主要的因素是：<span>{{ powerLossReason }}</span></p>
</div>
</section>
<section>
<div class="column-chart chart">
<div>
<p>{{currentYear}}年{{currentFarm?.farmName}}风场各月发电能力评估</p>
</div>
<div class="column-farm">
<app-assess-column-echart 
[xAxisData]="xAxisData" [series]="yearFarmColumnSeries"></app-assess-column-echart>
</div>
</div>
<div class="assess-count">
<p>{{currentYear}}年发电能力较好的月份是：<span *ngFor="let item of monthsPowerCapacity">{{item?.date}}，</span></p>
<div>
<p>发电能力较差的月份是：</p>
<div class="center">
<table>
<thead>
<tr style="color:#8cd6cd;">
<th>序号</th>
<th>月份</th>
<th>损失因素</th>
</tr>
</thead>
<tbody>
<tr style="color:#8cd6cd;" *ngFor="let item of powerLossReasonMonth; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item?.name }}</td>
<td>{{ item?.lossReason}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

</section>
</div>

<div class="turb-assess">
<div class="turb-assess-chart">
<div>
<p>{{currentYear}}年{{currentFarm?.farmName}}风场各风机发电能力评估</p>
</div>
<div class="column-turb">
<app-assess-column-echart 
[isTurb]="true" [xAxisData]="xAxisDataturb" [series]="turbineColumnSeries"></app-assess-column-echart>
</div>
</div>
<div class="turb-assess-count">
<p>{{currentYear}}年发电能力较好的风机是：<span *ngFor="let item of turbPowerCapacity">{{ item?.deviceName }}，</span></p>
<div>
<p>发电能力较差的风机是：</p>
<div class="center">
<table>
<thead>
<tr style="color:#8cd6cd;">
<th>序号</th>
<th>机组</th>
<th>损失因素</th>
</tr>
</thead>
<tbody>
<tr style="color:#8cd6cd;" *ngFor="let item of powerLossReasonTurb; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item?.name }}</td>
<td>{{ item?.lossReason}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="main-content" [ngClass]="{'main-content':true,active:active==1}">
<div class="farm-assess">
<section>
<div class="pie-chart chart">
<div>
<p>{{currentYear}}年{{ currentFarm?.farmName }}风场{{ currentMonth }}月份发电能力评估</p>
</div>
<div class="pie-tab">
<div class="pie">
<app-assess-pie-echart [series]="monthPieSeries"></app-assess-pie-echart>
</div>
<div class="tab">
<div class="center">
<table>
<tr style="color:#22b14c;">
<td>实发电量</td>
<td>{{ monthActualPowerTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#a349a4;">
<td>性能损失电量</td>
<td>{{ monthPerformLossTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#ff7f27;">
<td>停机损失电量</td>
<td>{{ monthStopLossTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#00a2e8;">
<td>限电损失电量</td>
<td>{{ monthLimitLossTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#FF0000;">
<td>坏点损失电量</td>
<td>{{ monthBadLossTotal | number:'1.1-2' }}万kWh</td>
</tr>
<tr style="color:#fff;">
<td>能量利用率</td>
<td>{{ monthUsePercentTotal | number:'1.1-2'}} %</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="assess-count">
<p>{{currentYear}}年{{currentFarm?.farmName}}风场{{ currentMonth }}月份发电能力：{{ powerJudgeMonth }}</p>
<p>影响{{currentFarm?.farmName}}风场{{ currentMonth }}月份发电能力最主要的因素是：{{ monthPowerLossReason }}</p>
</div>
</section>
<section>
<div class="column-chart chart">
<div>
<p>{{currentYear}}年{{currentFarm?.farmName}}风场{{ currentMonth }}月份发电能力评估</p>
</div>
<div class="column-farm">
<app-assess-column-echart [xAxisData]="xAxisDataMonth" [series]="monthFarmColumnSeries"></app-assess-column-echart>
</div>
</div>
<div class="assess-count">
<p>{{currentYear}}年{{currentFarm?.farmName}}风场{{ currentMonth }}月份发电能力较好的日期是：<span *ngFor="let item of datePowerCapacity">{{item?.date}}，</span></p>
<!-- <div *ngFor="let item of powerLossReasonDate">
<p>发电能力较差的日期是：<span>{{item?.name}}</span></p>
<p>影响<span>{{item?.name}}</span>发电能力最主要的因素是：{{ item?.lossReason }}</p>
</div> -->
<div>
<p>发电能力较差的日期是：</p>
<div class="center">
<table>
<thead>
<tr style="color:#8cd6cd;">
<th>序号</th>
<th>日期</th>
<th>损失因素</th>
</tr>
</thead>
<tbody>
<tr style="color:#8cd6cd;" *ngFor="let item of powerLossReasonDate; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item?.name }}</td>
<td>{{ item?.lossReason}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

</section>
</div>

<div class="turb-assess">
<div class="turb-assess-chart">
<div>
<p>{{currentYear}}年{{currentFarm?.farmName}}风场{{currentMonth }}月份各风机发电能力评估</p>
</div>
<div class="column-turb">
<app-assess-column-echart [isTurb]="true" [xAxisData]="xAxisDataTurbName" [series]="turbMonthFarmColumnSeries"></app-assess-column-echart>
</div>
</div>
<div class="turb-assess-count">
<p>{{currentYear}}年{{currentFarm?.farmName}}风场{{currentMonth }}月份发电能力较好的风机是：<span *ngFor="let item of turbMonthPowerCapacity">{{ item?.deviceName }}，</span></p>
<div>
<p>发电能力较差的风机是：</p>
<div class="center">
<table>
<thead>
<tr style="color:#8cd6cd;">
<th>序号</th>
<th>机组</th>
<th>损失因素</th>
</tr>
</thead>
<tbody>
<tr style="color:#8cd6cd;" *ngFor="let item of turbinePowerLossReasonMonth; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item?.name }}</td>
<td>{{ item?.lossReason}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>